import React, { Component } from "react"
import MyNavLink from "./MyNavLink"
import News from "./news.jsx"
import Message from "./message"
import { Route, Switch, Redirect } from "react-router-dom"

export default class Home extends Component {
  showAbout = () => {
    // 编程式路由导航
    // 前进后退 go()前进或后退几步  goBack()后退几步 goForward()前进几步
    // replace push
    this.props.history.replace(`/home/message`, { id: 123 })
    // state 传参

    // this.props.history.replace(`/about`)
    // replace 跳转
    // this.props.history.push(`/about`)
    // push 跳转
  }
  render() {
    return (
      <>
        <div>Home</div>
        <div onClick={this.showAbout}>About</div>
        <MyNavLink to="/home/news">news</MyNavLink>

        <MyNavLink to={{ pathname: "/home/message", state: { id: 123 } }}>
          message
        </MyNavLink>
        {/* 路由 state 传参 */}

        {/* <MyNavLink to={`/home/message/?id=${123}`}>message</MyNavLink> */}
        {/* 路由 search 传参 */}

        {/* <MyNavLink to={`/home/message/${123}`}>message</MyNavLink> */}
        {/* 路由 params 传参 */}
        <Switch>
          <Route path="/home/news" component={News}></Route>
          <Route path="/home/message" component={Message}></Route>
          {/* <Route path="/home/message/:id" component={Message}></Route> */}
          {/* <Route path="/home/message/:id" component={Message}></Route> */}
          {/* 路由 params 传参 */}

          <Redirect to="/home/news"></Redirect>
        </Switch>
      </>
    )
  }
}
